import React from 'react'
import style from './index.module.css'
import banner from '../../img/xq-1.png'
import prod1 from '../../img/s-1.png'
import prod2 from '../../img/s-2.png'
import prod3 from '../../img/s-3.png'
import Btn from '../btn/index'
import Nabar from '../Nabar'

function Xq2() {
    const coupons = [
        { value: '5', desc: '无门槛', title: '全品类' },
        { value: '100', desc: '满199可用', title: '仅限会员等部分商品使用' },
        { value: '9', desc: '满59可用0', title: '全品类' },
        { value: '20', desc: '满99可用', title: '全品类' },
    ]

    const products = [
        { tag: '热卖推荐', name: '蓝素 他达拉非 5mg*14片', sub: '低至5折', price: '51.00', img: prod1 },
        { tag: '热卖推荐', name: '蓝素 盐酸达泊西汀片 30mg*5片', sub: '+0.1元多得套餐or润滑液', price: '55.00', img: prod2 },
        { tag: '热卖推荐', name: '蓝素 他达拉非 20mg*2片', sub: '多买多送', price: '16.00', img: prod3 },
    ]

    return (
        <div className={style.page}>
            <div>
                <Nabar title='品牌专题' sticky={false}/>
            </div>
            {/* 顶部Banner */}
            <div className={style.bannerWrap}>
                <img src={banner} alt='' className={style.banner} />
            </div>
            <div className={style.couponWrap}>
                {/* 优惠券区 2x4（示意按截图样式的两行四格） */}
                <div className={style.couponGrid}>
                    {coupons.map((c, i) => (
                        <div key={i} className={style.couponItem}>
                            <div className={style.couponValue}>¥{c.value}</div>
                            <div className={style.couponDesc}>
                                <span>
                                    {c.desc}
                                </span>
                                <p>{c.title}</p>
                                <p className={style.couponBtn}>立即领取</p>
                            </div>
                        </div>
                    ))}

                </div>

                {/* 商品列表 */}
                <div className={style.list}>
                    {products.map((p, i) => (
                        <div key={i} className={style.card}>
                            <div className={style.tag}>{p.tag}</div>
                            <div className={style.cardBody}>
                                <img src={p.img} alt='' className={style.cardImg} />
                                <div className={style.cardInfo}>
                                    <div className={style.cardTitle}>{p.name}</div>
                                    <div className={style.cardSub}>{p.sub}</div>
                                    <div className={style.cardPriceRow}>
                                        <span className={style.cardPriceLabel}>活动价：</span>
                                        <span className={style.cardPrice}>¥{p.price}</span>
                                    </div>
                                </div>
                            </div>
                            <div className={style.corner}>降</div>
                        </div>
                    ))}
                </div>
            </div>
            <Btn></Btn>
        </div>
    )
}

export default Xq2
